<template>
  <div class="evaluation-list-box">
    <div v-if="list.length" class="list-ul">
      <el-scrollbar style="height: calc(100% - 40px)">
        <div
          :class="['list-li', item.id === curId ? 'select' : '']"
          v-for="item in list"
          :key="item.id"
          @click.stop="onClick(item)">
          <div class="triangle-tips top-left bg-red" v-if="item.dataValid == '0'">
            <span>
              <em>无效</em>
            </span>
          </div>
          <div class="li-head">
            <div class="title">{{ item.assessmentTitle }}</div>
            <div :class="['status', `status_${item.assessmentStatus}`]">
              {{ getStatusText(item.assessmentStatus) }}
            </div>
          </div>
          <div class="li-bottom">
            <div class="create-time">{{ item.createTime }}</div>
          </div>
        </div>
      </el-scrollbar>
      <div class="page_r">
        <el-pagination
          background
          layout="pager,total"
          :current-page="tablePage.currentPage"
          :page-size="tablePage.pageSize"
          :total="total"
          @current-change="onPageChange"
          :hide-on-single-page="false"
          :pager-count="5"
          small></el-pagination>
      </div>
    </div>
    <div v-else class="list-ul empty-box">暂无数据</div>
  </div>
</template>
<script>
export default {
  name: 'EvaluationList',
  emits: ['select', 'change'],
  props: {
    // 测评任务列表
    list: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
    // 状态列表
    taskStatus: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    list: {
      handler(arr) {
        if (arr && arr.length) {
          let obj = {}
          const { id = '' } = this.$route.query || {}
          const inx = arr.findIndex(item => item.id === id)
          if (id && inx > -1 && this.total === this.tablePage.totalSize) {
            this.curId = id
            obj = arr[inx]
          } else {
            this.curId = arr[0].id
            obj = arr[0]
          }
          this.tablePage.totalSize = this.total
          this.$emit('select', obj)
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalSize: 0,
      },
      curId: '',
    }
  },
  methods: {
    getStatusText(val) {
      for (let i = 0; i < this.taskStatus.length; i++) {
        const item = this.taskStatus[i]
        if (item.value && item.value === val) {
          return item.label
        }
      }
    },

    /* 监控评价表点击 */
    onClick(obj) {
      if (this.curId === obj.id) return
      this.curId = obj.id
      this.$emit('select', obj)
    },

    /* 监听页码切换 */
    onPageChange(e) {
      this.tablePage.currentPage = e
      this.$emit('change', this.tablePage)
    },
  },
}
</script>
<style lang="scss" scoped>
.evaluation-list-box {
  // padding-left: 25px;
  height: 100%;
  .list-ul {
    border: 1px solid #dcdfe6;
    // box-shadow: 4px 3px 4px 0 rgba(0, 0, 0, 0.12);
    height: calc(100%);
    position: relative;
    overflow: hidden;
    .list-li {
      border-bottom: 1px solid #dcdfe6;
      min-height: 70px;
      cursor: pointer;
      padding: 20px;
      position: relative;
      &:hover,
      &.active,
      &.select {
        background: #4186e7cb;
        border-color: #fff;
        .li-head {
          .status,
          .title {
            color: #fff;
            border-color: #fff;
          }
        }
        .li-bottom {
          .create-time {
            color: #fff;
          }
        }
      }
      &:hover {
        opacity: 0.8;
      }
      .triangle-tips {
        position: absolute;
        z-index: 1;
        right: 0;
        height: 40px;
        width: 40px;
        display: flex;
        align-items: center;
        span {
          position: absolute;
          right: 0;
          width: 0;
          height: 0;
          em {
            position: absolute;
            height: 40px;
            width: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            font-style: normal;
            font-size: 12px;
          }
        }
        &.top-left {
          left: 0;
          top: 0;
          span {
            top: 0;
            border-right: 40px solid transparent;
            border-top: 40px solid#62a2fc;
          }
          em {
            top: -46px;
            left: -7px;
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
          }
          &.bg-red {
            span {
              border-top-color: #d81e06;
            }
          }
        }
      }
      .li-head {
        display: flex;
        margin-bottom: 20px;
        .title {
          font-size: 14px;
          color: #333;
          font-size: 500;
          flex: 1;
        }
        .status {
          margin-left: 20px;
          min-width: 65px;
          height: 24px;
          padding: 3px 5px;
          text-align: center;
          font-size: 12px;
          border: 1px solid #dcdfe6;
          color: #999;
        }
        .status_-1 {
          color: #666;
          border-color: #666;
        }
        .status_0 {
          border-color: #d81e06;
          color: #d81e06;
        }
        .status_4 {
          border-color: #f59a23;
          color: #f59a23;
        }
        .status_1,
        .status_2 {
          border-color: #1852a3;
          color: #1852a3;
        }
      }
      .li-bottom {
        display: flex;
        justify-content: flex-end;
        .create-time {
          font-size: 12px;
          color: #999;
        }
      }
    }

    .page_r {
      margin-top: 9px;
    }
  }
  .empty-box {
    font-size: 13px;
    color: #666;
    display: flex;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}
</style>
